<template>
    <article>
        <header>表格</header>
        <section>
            <header>颜色</header>
            <div>
                <cv-table c="table default medium" :data="data">
                    <template v-slot="scope">
                        <cv-table-column label="#" :scope="scope">{{scope.index+1}}</cv-table-column>
                        <cv-table-column label="日期" :scope="scope">{{scope.row.date}}</cv-table-column>
                        <cv-table-column label="姓名" :scope="scope">{{scope.row.name}}</cv-table-column>
                        <cv-table-column label="住址" :scope="scope">{{scope.row.address}}</cv-table-column>
                    </template>
                </cv-table>
                <cv-table c="table primary medium" :data="data">
                    <template v-slot="scope">
                        <cv-table-column label="#" :scope="scope">{{scope.index+1}}</cv-table-column>
                        <cv-table-column label="日期" :scope="scope">{{scope.row.date}}</cv-table-column>
                        <cv-table-column label="姓名" :scope="scope">{{scope.row.name}}</cv-table-column>
                        <cv-table-column label="住址" :scope="scope">{{scope.row.address}}</cv-table-column>
                    </template>
                </cv-table>
            </div>
        </section>
        <section>
            <header>样式</header>
            <div>
                <cv-table c="table default medium" style="width: 100%;" :data="data">
                    <template v-slot="scope">
                        <cv-table-column label="#" :scope="scope" width="2em">{{scope.index+1}}</cv-table-column>
                        <cv-table-column label="日期" :scope="scope" width="10em">{{scope.row.date}}</cv-table-column>
                        <cv-table-column label="姓名" :scope="scope" width="10em">{{scope.row.name}}</cv-table-column>
                        <cv-table-column label="住址" :scope="scope" width="20em">{{scope.row.address}}</cv-table-column>
                    </template>
                </cv-table>
                <cv-table c="table primary medium" noAutoPadding style="width: 100%;"  :data="data">
                    <template v-slot="scope">
                        <cv-table-column label="#" :scope="scope" width="2em">{{scope.index+1}}</cv-table-column>
                        <cv-table-column label="日期" :scope="scope" width="10em">{{scope.row.date}}</cv-table-column>
                        <cv-table-column label="姓名" :scope="scope" width="10em">{{scope.row.name}}</cv-table-column>
                        <cv-table-column label="住址" :scope="scope" width="auto">{{scope.row.address}}</cv-table-column>
                    </template>
                </cv-table>
            </div>
        </section>
    </article>
</template>

<script>
    export default {
        name: "ExampleTable",
        data() {
            return {
                data: [{
                    date: "2021-09-10",
                    name: "张三",
                    address: "北京市海淀区唐家岭土井村路45号"
                }, {
                    date: "2021-09-10",
                    name: "张三",
                    address: "北京市海淀区唐家岭土井村路45号"
                }, {
                    date: "2021-09-10",
                    name: "张三",
                    address: "北京市海淀区唐家岭土井村路45号"
                }]
            };
        }
    }
</script>

<style scoped>
</style>
